<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>保险智能分析系统</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="libs/dataTables/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="libs/bootstrap-spinner/bootstrap-spinner.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/build.css">
<script type="text/javascript" src="libs/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="libs/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="libs/dataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="libs/dataTables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="libs/dataTables/dataTables.bootstrapPagination.js"></script>
<script type="text/javascript" src="libs/bootstrap-spinner/jquery.spinner.min.js"></script>
<style>
	body,h3,p,input{margin: 0;padding: 0;font-family: '微软雅黑';}
	a{text-decoration: none;}	
	img{
		border: 0;
	}
	body{
		background-image: url('image/BG.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;		
	}
	.navbar{ 
		background: #ffffff; 
		color: #666666; 
		font-weight: normal;
		border-bottom: 1px solid #e7e7e7;
	}
	.navbar-header{
		float:none;
	}
	.navbar h3{
		font-size: 20px;
		font-weight: bold;
		line-height: 50px;
		letter-spacing: 1px;
		text-align: center;
	}
	.navbar h3 span{
		font-weight: normal;
		padding-left: 10px;
		margin-left: 10px;
		border-left: 1px solid #999999;
	}	
	.navbar a{
		color: #747474;
		font-size: 20px;
		position:absolute;
		top:15px;
		left:10px;
	}
	.navbar a:focus,.navbar a:hover{
		text-decoration: none;
	}	
/*	@media (min-width: 992px){
		.con{
			width: 100%;
			margin-top: 10% !important;
		}
	}	
	@media (min-width: 768px){
		.con{
			width: 100%;
			margin-top: 30%;
		}
	}	*/
	.con .container .title{
		color: #666666;
		font-size: 40px;
		letter-spacing: 2px;
		padding-bottom: 40px;
	}
	.con .search_div{
		text-align: center;
	}
	.con .search_div input{
		width: 300px;
		height: 35px;
		line-height: 35px;
		font-size: 16px;
		padding-left: 15px;
		border-radius: 35px;
		border: 2px solid #f87930;
	}
	.con .search_div .search_btn{
		display: inline-block;
		width: 95px;
		color: #fff;
		font-size: 18px;
		height: 35px;
		line-height: 35px;
		margin: 0 20px;
		background: #f9752c;
		border-radius: 25px;
	}
	.con .table_div{
		width: 100%;
		max-width: 800px;
		margin: 30px auto 0;
	}
	#table_infor{
		width: 100%;
		background: #fff;
	}
	.end{
		color: #bdbdbd;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2px;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 15px;
	}
	/*表格*/
	.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
	    background-color: #f9752c;
	    border-color: #f9752c;
	}
	#table_infor td {
		color: #6e89a9;
	    font-size: 16px;
	    text-align: center;
	    vertical-align: middle;
	}
	#table_infor th{
		color: #fe711d;
	    font-size: 18px;
	    text-align: center;
	    background: #fcf4ee;
	    border-bottom-width: 1px;
	}
	div.dataTables_wrapper div.dataTables_info{
		color: #fe711d;
	}
	.table_img{
		width: 40px;
		height: 40px;
	}
</style>
</head>
<body>
	<nav class="navbar">
		<div class="container">
			<div class="navbar-header">
				<h3 class="text-center">招商银行<span>智能分析</span></h3>
				<a href="javascript:void(0)" onClick="javascript :history.go(-1);"
					class="glyphicon glyphicon-chevron-left"></a>
			</div>
		</div>
	</nav>
	<div class="con">
		<div class="container">
			<p class="text-center title">客户信息</p>
			<div class="search_div">
				<input type="text" name="infor" id="" placeholder="输入客户姓名">
				<a href="javascript:void(0)" class="search_btn">查 询</a>
			</div>
			<div class="table_div">
				<table cellpadding="0" border="0" class="table table-striped table-bordered" cellspacing="0" width="100%" id="table_infor" >
					<thead>  
						<tr>   
							<th width="150" nowrap="nowrap">姓名</th>  
							<th width="100" nowrap="nowrap">年龄</th>  
							<th width="150" nowrap="nowrap">职业</th> 
							<th width="100" nowrap="nowrap">操作</th>
						</tr>  
					</thead>
				</table>
			</div>	
		</div>
	</div>
    <p class="end">版权归信诚人寿所有</p>
</body>
<script>
	var dataSet = [
		['张三','32','IT工程师','方案查看'],
		['张三','32','IT工程师','方案查看'],
		['张三','32','IT工程师','方案查看'],
		['张三','32','IT工程师','方案查看'],
		['张三','32','IT工程师','方案查看']
	];
	$(function(){
			$('#table_infor').dataTable({
				"lengthChange": false,//是否允许用户自定义显示数量
				"aLengthMenu": [[5, 10, -1], [5, 10,"All"]],
				"bPaginate": true, //翻页功能
				"ordering": true, //排序功能
				"Info": true,//页脚信息
				"searching": false,//本地搜索
				"autoWidth":false,//自适应宽度
				"stripeClasses": [ 'even' ],//设置斑马条纹效果，这里取消
				"sPaginationType": "bootstrap",//bootstrap分页样式
				"data": dataSet,//加载的数据(注：ajax请求的数据也可以，使用参考http://datatables.club/reference/option/ajax.html)
				"oLanguage": {//国际语言转化
				   "sLengthMenu": "显示 _MENU_ 记录",
				   "sZeroRecords": "对不起，查询不到任何相关数据",
				   "sEmptyTable": "未有相关数据",
				   "sLoadingRecords": "正在加载数据-请等待...",
				   "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
				   "sInfoEmpty": "当前显示0到0条，共0条记录",
				   "sInfoFiltered": "（数据库中共为 _MAX_ 条记录）",
				   "sProcessing": "<img src='../resources/user_share/row_details/select2-spinner.gif'/> 正在加载数据...",
				   "sSearch": "模糊查询：",
				   "sUrl": "",
				   "oPaginate": {
					   "sFirst": "首页",
					   "sPrevious": " 上一页 ",
					   "sNext": " 下一页 ",
					   "sLast": " 尾页 "
				   }
				},
				"columnDefs": [
					{		//设置禁止排序
					   orderable: false,
					   targets: [0,1,,2,3] 
					},
					{		//给用户id信息加上详情链接
					   targets: [1],
					   render:function(data, type, full) {  
                               return '<a href ="javascript:alert(\'这是用户id信息详情链接\');">'+data+'</a>';  
                            } 
					}
				],
				//第一列排序图标改为默认
				"order": [		
				   [0, null]
				],
				//翻页时候checkbox初始化
				"drawCallback": function( settings ) {

				}
			} );
	});
</script>
</html>